<!DOCTYPE html>

<html lang="en">

<head>
  <base href="./">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
  <meta name="author" content="Łukasz Holeczek">
  <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
  <title>学习平台 用户管理</title>
  <link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
  <link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
  <link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
</head>

<body class="app header-fixed aside-menu-fixed ">
  <header class="app-header navbar">
    <a class="navbar-brand" href="#">
      <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>学习平台
    </a>
    <ul class="nav navbar-nav d-md-down-none">
      <li class="nav-item px-3">
        <a class="nav-link" href="#">工作台</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">课程管理</a>
      </li>
      <li class="nav-item px-3">
        <a class="nav-link" href="#">设置</a>
      </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-bell"></i>
          <span class="badge badge-pill badge-danger">6</span>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-list"></i>
        </a>
      </li>
      <li class="nav-item d-md-down-none">
        <a class="nav-link" href="#">
          <i class="icon-location-pin"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          <img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <div class="dropdown-header text-center">
            <strong>Account</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-bell-o"></i> Updates
            <span class="badge badge-info">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-envelope-o"></i> Messages
            <span class="badge badge-success">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-tasks"></i> Tasks
            <span class="badge badge-danger">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-comments"></i> Comments
            <span class="badge badge-warning">42</span>
          </a>
          <div class="dropdown-header text-center">
            <strong>Settings</strong>
          </div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-user"></i> Profile</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-wrench"></i> Settings</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-usd"></i> Payments
            <span class="badge badge-secondary">42</span>
          </a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-file"></i> Projects
            <span class="badge badge-primary">42</span>
          </a>
          <div class="divider"></div>
          <a class="dropdown-item" href="#">
            <i class="fa fa-shield"></i> Lock Account</a>
          <a class="dropdown-item" href="#">
            <i class="fa fa-lock"></i> Logout</a>
        </div>
      </li>
    </ul>
    <button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
      <span class="navbar-toggler-icon"></span>
    </button>
    <button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
      <span class="navbar-toggler-icon"></span>
    </button>
  </header>
  <div class="app-body">
    <main class="main">
      <!-- Breadcrumb-->
      <ol class="breadcrumb">
        <li class="breadcrumb-item">首页</li>
        <li class="breadcrumb-item active">用户管理</li>
        <li class="breadcrumb-item active">返回</li>
        <!-- Breadcrumb Menu-->
      </ol>
      <div class="container-fluid">
        <div class="animated fadeIn" id="itemsTemplate">
          <div class="card">
            <div class="card-header">
              <i class="icon-people" aria-hidden="true"></i>信息管理
              <div class="card-header-actions">
                <button class="btn btn-light" @click="addItem" type="button">
                  <i class="icon-plus"> 新增</i>
                </button>
                <button class="btn btn-light" data-toggle="modal" data-target="#multipleModal" type="button">
                  <i class="icon-trash"> 删除</i>
                </button>
              </div>
            </div>
            <div class="card-body collapse show" id="collapseExample">
              <table class="table table-responsive-sm table-bordered table-striped">
                <thead>
                  <tr>
                    <th><input type="checkbox" v-model="checkall" @change="checkAll" /> 全选</th>
                    <th>用户名</th>
                    <th>注册时间</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in items" v-if="index>=(cur-1)*pagesize && index < cur*pagesize">
                    <td><input type="checkbox" v-model="item.select" @change="checkOne" /> {{item.id}}</td>
                    <td @click="edit(index)">{{item.name}}</td>
                    <td @click="edit(index)">{{item.registerDate}}</td>
                    <td @click="edit(index)">{{item.role}}</td>
                    <td>
                      <span v-if="item.status=='激活'"  class="badge badge-success">{{item.status}}</span>
                      <span v-if="item.status=='禁用'" class="badge badge-danger">{{item.status}}</span>
                    </td>
                    <td>
                      <button class="btn btn-primary" type="button" @click="update(index)"><i class="icon-note"></i>
                        编辑</button>
                      <button class="btn btn-danger" type="button" v-on:click="confirmDel(index)"><i
                          class="fa fa-trash-o fa-lg"></i>
                        删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- 翻页 -->
              <ul class="pagination pagination-lg">
                <template v-for="page in Math.ceil(items.length/pagesize)">
                  <li v-on:click="Pre()" id="pre" v-if="page==1" class="disabled">
                    <a class="page-link">Prev</a>
                  </li>
                  <li v-if="page==1" class="page-item active" v-on:click="NumPage(page, $event)">
                    <a class="page-link">{{page}}</a></li>
                  <li v-else v-on:click="NumPage(page, $event)" class="page-item">
                    <a class="page-link">{{page}}</a>
                  </li>
                  <li id="next" v-on:click="Next()" v-if="page==Math.ceil(items.length/pagesize)">
                    <a class="page-link">Next</a>
                  </li>
                </template>
              </ul>
            </div>
          </div>
          <!-- Modal删除 -->
          <div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">危险</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>记录删除后将无法恢复！确定要删除吗？</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-danger" type="button" v-on:click="del()">确认</button>
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal多项删除 -->
          <div class="modal fade" id="multipleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-danger" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">危险</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>记录删除后将无法恢复！确定要删除吗？</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-danger" type="button" @click="multipleDel">确认</button>
                  <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal删除成功 -->
          <div class="modal fade show" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-success" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">成功</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p>删除成功!</p>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-success" type="button" data-dismiss="modal">确定</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal编辑 -->
          <div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-primary" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">编辑</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" v-show="editSeen">
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                      <div class="col-md-9">
                        <input class="form-control" id="text-input" type="text" name="text-input" placeholder="用户名"
                          v-model="editItems.name" value="{{name}}" required>
                        <span class="help-block">用户名必须4到16位(字母，数字，下划线，减号)</span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="email-input">注册时间</label>
                      <div class="col-md-9">
                        <input class="form-control" id="1" type="text" name="disabled-input" placeholder="年 -月-日 --:--"
                          disabled="" v-model="editItems.registerDate" value="{{registerDate}}"></div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="password-input">角色</label>
                      <div class="col-md-9">
                        <select class="custom-select" v-model="editItems.role" value="{{role}}">
                          <option selected>一般用户</option>
                          <option>管理员</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label">状态</label>
                      <div class="col-md-9 col-form-label">
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" id="inline-radio1" type="radio" v-model="editItems.status"
                            value="激活">
                          <label class="form-check-label" for="inline-radio1">激活</label>
                        </div>
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" type="radio" v-model="editItems.status" value="禁用">
                          <label class="form-check-label" for="inline-radio2">禁用</label>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary" type="button" @click="editSubmit">保存</button>
                  <button class="btn btn-secondary" type="button" @click="off">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- Modal添加 -->
          <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-primary" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title">新增</h5>
                  <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form class="form-horizontal" action="" method="post" enctype="multipart/form-data" v-show="seen">
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="text-input">用户名</label>
                      <div class="col-md-9">
                        <input class="form-control" type="text" name="text-input" placeholder="用户名"
                          v-model="newItems.name" required>
                        <span class="help-block">用户名必须4到16位(字母，数字，下划线，减号)</span>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="text-input">注册时间</label>
                      <div class="col-md-9" id="time">
                        <input class="form-control" type="text" name="disabled-input" placeholder="年 -月-日 --:--"
                          v-model="newItems.registerDate" value=""></div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label" for="password-input">角色</label>
                      <div class="col-md-9">
                        <select class="custom-select" v-model="newItems.role">
                          <option selected>一般用户</option>
                          <option>管理员</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group row">
                      <label class="col-md-3 col-form-label">状态</label>
                      <div class="col-md-9 col-form-label">
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" type="radio" v-model="newItems.status" value="激活">
                          <label class="form-check-label" for="inline-radio1">激活</label>
                        </div>
                        <div class="form-check form-check-inline mr-1">
                          <input class="form-check-input" type="radio" v-model="newItems.status" value="禁用">
                          <label class="form-check-label" for="inline-radio2">禁用</label>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button class="btn btn-primary" type="button" v-on:click="add">保存</button>
                  <button class="btn btn-secondary" type="button" v-on:click="off">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>

  <footer class="app-footer">
    <div>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
      <span>&copy; 2018 creativeLabs.</span>
    </div>
    <div class="ml-auto">
      <span>Powered by</span>
      <a href="http://127.0.0.1:5500/index.html">CoreUI</a>
    </div>
  </footer>
  <!-- CoreUI and necessary plugins-->
  <script src="vendors/jquery/js/jquery.min.js"></script>
  <script src="vendors/popper.js/js/popper.min.js"></script>
  <script src="vendors/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendors/pace-progress/js/pace.min.js"></script>
  <script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
  <script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
  <script src="js/main.js"></script>
  <script src="vendors/mock/mock-min.js"></script>
  <script src="vendors/vue/vue.js"></script>
  <!-- 获取数据 -->
  <script>
    var items = [];
    var current;
    $(function () {
      //使用Mock.js库，模拟一个api数据访问接口
      Mock.mock("http://127.0.0.1:5500/czf", {
        'data|20-40': [{
          id: "@increment()",
          name: "@cname()",
          'role|1': ["一般用户", "管理员"],
          registerDate: "@datetime()",
          'status|1': ["激活", "禁用"]
        }],
        success: true,
        code: 200,
        msg: "Success"
      });
      //使用jQuery提供的getJSON方法，向服务器发送一个请求
      //返回的结果由第二个参数的function处理
      $.getJSON("http://127.0.0.1:5500/czf", function (response) {
        items = response.data;
        var i;
        for (i = 0; i < items.length; i++) {
          items[i].select = false;
        }
        // checked = items[i].selected;
        //使用vue.js框架，将response.data数据填充到itemsTemplate模板
        var app = new Vue({
          el: '#itemsTemplate',
          data: {
            items: items,
            //添加临时数据库
            newItems: {
              'id': items.length + 1,
              'name': '',
              'role': '',
              'registerDate': current,
              'status': ''
            },
            seen: false,
            editSeen: false,
            //编辑临时数据库
            editItems: {
              'id': '',
              'name': '',
              'role': '',
              'registerDate': '',
              'status': ''
            },

            index: -1,
            checkall: false, // 正在进行中的数据是否被选中
            pagesize: 6, //一页加载数据
            cur: 1, //当前页的页码
          },
          // 在 `methods` 对象中定义方法
          methods: {
            confirmDel: function (i) {
              $('#dangerModal').modal('show');
              index = i;
            },
            del: function () {
              this.items.splice(index, 1);
              $('#dangerModal').modal('hide');
              $('#successModal').modal('show');
            },
            //多项删除
            multipleDel: function () {
              $('#multipleModal').modal('hide');
              $('#successModal').modal('show');
              for (var i = 0; i < this.items.length; i++) {
                if (this.items[i].select) {
                  this.items.splice(i, 1);
                  i--;
                }
              }
            },
            // 用户全选
            checkAll() {
              this.items.forEach(items => items.select = this.checkall);
            },
            //用户单选
            checkOne() {
              this.checkall = this.items.every(items => items.select);
            },
            //上一页方法
            Pre: function (event) {
              $(".pagination .active").prev().trigger("click");
            },
            //下一页方法
            Next: function (event) {
              $(".pagination .active").next().trigger("click");
            },
            //点击页码的方法
            NumPage: function (num, event) {
              if (this.cur == num) {
                return;
              }
              this.cur = num;
              $(".pagination li").removeClass("active");
              if (event.target.tagName.toUpperCase() == "LI") {
                $(event.target).addClass("active");
              } else {
                $(event.target).parent().addClass("active");
              }
              if (this.cur == 1) {
                $("#pre").addClass("disabled");
              } else {
                $("#pre").removeClass("disabled");
              }
              if (this.cur == Math.ceil(this.items.length / this
                .pagesize)) {
                $("#next").addClass("disabled");
              } else {
                $("#next").removeClass("disabled");
              }
            },
            // 添加
            addItem: function () {
              $('#addModal').modal('show');
              this.seen = this.seen == false ? true : false;

            },
            //提交
            add: function () {
              //插入到items中
              this.items.push(this.newItems);
              this.newItems = {};
              this.seen = false
              $('#addModal').modal('hide');
            },
            //关闭
            off: function () {
              this.seen = false
              $('#addModal').modal('hide');
              $('#primaryModal').modal('hide');
            },
            //编辑
            update: function (index) {
              $('#primaryModal').modal('show');
              this.editSeen = true;
              this.editItems = this.items[index];
            },
            //编辑后提交
            editSubmit: function () {
              $('#primaryModal').modal('hide');
              this.editSeen = false;
            },
          }
        });
        return;
      });
    });
  </script>

  <!-- 获取系统时间 -->
  <script type="text/javascript">
    window.setInterval("showtime()");

    function showtime() {
      var date = new Date();
      var s1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hh = date.getHours();
      var mi = date.getMinutes();
      var ss = date.getSeconds();

      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hh >= 0 && hh <= 9) {
        hh = "0" + hh;
      }
      if (mi >= 0 && mi<= 9) {
        mi = "0" + mi;
      } if (ss >= 0 && ss <= 9) {
        hh = "0" + hh;
      }
      current = year + s1 + month + s1 + strDate+ " " + hh + ":" + mi +
          ":" + ss +
          " ";
      return current;
    }
  </script>
  <script>
    //使用ID号的checkBox进行删除
    function DeleteRow(table, index) {
      //从最后一行开始检索，一直检索到指定的目标
      for (var i = table.rows.length - 1; i > 0; i--) {
        //找到每一行第一个单元格的第一个元素
        var chkOrder = table.rows[i].cells[0].firstChild;
        //判断元素是否存在
        if (chkOrder) {
          //判断元素类型是不是为checkbox
          if (chkOrder.type = "CHECKBOX") {
            //判断CheckBox是否被选中
            if (chkOrder.checked) {
              //执行删除
              table.deleteRow(i);
            }
          }
        }
      }
    }
  </script>
</body>

</html>